<template>
	<view v-show="!isLoading" class="container" :style="appThemeStyle">
		<!--轮博图-->
		<SlideImage v-if="!isLoading" :images="activity.activity_images" />
		
		<!--成员列表-->
		<view class="member-list" v-if="memberList.length>0">
			<view class="member-item" v-for="(member, index) in memberList" :key="index">
				<image :src="member.avatar" mode="aspectFill"></image>
			</view>
			<view class="view-more-button">>></view>
		</view>
		<!-- 活动信息 -->
		<view v-if="!isLoading" class="activity-info m-top20">
			<view>{{activity.money}}20/人</view>
			<view class="top">
				<text class="category">{{activity.category}}</text>
				<text class="name">{{activity.name}}</text>
			</view>
			<view class="resume">
				<view class="top2-item">
					<view class="icon"></view>
					<view class="tag">骑行距离</view>
					<view class="content">{{activity.distance}}</view>
				</view>
				<view class="top2-item">
					<view class="icon"></view>
					<view class="tag">爬升高度</view>
					<view class="content">{{activity.height}}m</view>
				</view>
				<view class="top2-item">
					<view class="icon"></view>
					<view class="tag">骑行强度</view>
					<view class="content">{{activity.level}}</view>
				</view>
				<view class="top2-item">
					<view class="icon"></view>
					<view class="tag">车辆类型</view>
					<view class="content">{{activity.type}}</view>
				</view>
				<view class="top2-item">
					<view class="icon"></view>
					<view class="tag">适合人群</view>
					<view class="content">18-65岁</view>
				</view>
				<view class="top2-item">
					<view class="icon"></view>
					<view class="tag">出发地点</view>
					<view class="content">{{activity.start_address}}</view>
				</view>
			</view>
			<view class="info">
				<view class="registration-item">
					<view class="registration-label">领队</view>
					<view class="registration-value">jerry</view>
				</view>
				<view class="registration-item">
					<view class="registration-label">目的地</view>
					<view class="registration-value">{{activity.destination_address}}</view>
				</view>
				<view class="registration-item">
					<view class="registration-label">活动时间</view>
					<view class="registration-value">{{activity.start_time}}</view>
				</view>
				<view class="registration-item">
					<view class="registration-label">报名截止时间</view>
					<view class="registration-value">{{activity.end_time}}</view>
				</view>
			</view>
			<view class="introduec">
				<mp-html :content="activity.content" />
			</view>
			<!-- 底部固定按钮栏 -->
			<view class="bottom-bar">
			  <view class="fast-item">
				<view class="fast-icon">
				  <text class="iconfont icon-kefu1"></text>
				</view>
				<view class="fast-text">
				  <text>客服</text>
				</view>
			  </view>
			  <!-- 操作按钮 -->
			  <view class="foo-item-btn">
			    <view class="btn-wrapper">
			      <view class="btn-item btn-item-main" @click="onJoinActivity()">
			        <text>立即报名</text>
			      </view>
			    </view>
			  </view>
 			</view>
		</view>	
	</view>
</template>

<script>
	import SlideImage from './components/SlideImage'	
	import CustomerBtn from '@/components/customer-btn'
	import * as Api from '@/api/activity'
	
	export default {
		components: {
			SlideImage,
			CustomerBtn,
			Api
		},
		data() {
			return {
				 // 正在加载
				isLoading: false,
				// 当前ID
				activityId: null,
				// 详情
				activity: {},
				//成员列表
				memberList: [],
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		async onLoad(options) {
		  // 记录query参数
		  this.activityId = options.activityId
		  // 加载页面数据
		  this.onRefreshPage()
		},
		methods:{
			//加入活动
			onJoinActivity(){
				var id = this.activityId;
			},
			// 刷新页面数据
			onRefreshPage() {
			  const app = this
			  app.isLoading = true
			  Promise.all([app.getActvityDetail(), app.getActvityMember()])
			    .finally(() => app.isLoading = false)
			},
			// 获取活动信息
			getActvityDetail() {
			  const app = this
			  return new Promise((resolve, reject) => {
			    Api.detail(app.activityId)
			      .then(result => {
			        app.activity = result.data.detail
			        resolve(result)
			      })
			      .catch(reject)
			  })
			},
			// 获取活动参加名单
			getActvityMember() {
			  const app = this
			  return new Promise((resolve, reject) => {
			    Api.memberList(app.activityId)
			      .then(result => {
			        app.memberList = result.data.list
			        resolve(result)
			      })
			      .catch(reject)
			  })
			},
		}
	}  
</script>

<style lang="scss" scoped>
	.container {
	  // 设置ios刘海屏底部横线安全区域
	  // 110 - 18 + 4
	  padding-bottom: calc(constant(safe-area-inset-bottom) + 106rpx + 6rpx);
	  padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx);
	}
	.member-list {
		display: flex;
		flex-wrap: wrap; /* 允许成员项换行 */
		margin-top: 10px;
	}
	
	.member-item {
		text-align: center;
	}
	
	.member-item image {
		width: 30px;
		height: 30px;
		border-radius: 50%;
	}
	
	.view-more-button {
		margin-left: auto;
		margin-right: 10px;
		white-space: nowrap; /* 防止按钮文字换行 */
		flex-shrink: 0; /* 防止按钮缩小 */
		line-height: 30px;
		padding-right: 20px;
	}
	
	.bottom-bar {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  display: flex;
	  background-color: white;
	  border-top: 1px solid #ccc;
	  padding: 10px;
	}
	
	.bottom-button {
	  flex: 1;
	  margin: 0 5px;
	}
	
	.resume {
	  display: flex;
	    flex-wrap: nowrap; /* 禁止换行 */
	    overflow-x: auto; /* 允许横向滚动 */
	    margin-top: 20px;
	    -webkit-overflow-scrolling: touch; /* 使滚动在 iOS 设备上更顺滑 */
		background-color: #e9e9e9; /* 为 top2 区域设置背景色 */
		  padding: 10px; /* 添加内边距，让内容与边框有一定距离 */
		  border-radius: 5px; /* 圆角边框 */
		  /* 隐藏滚动条，适用于 WebKit 浏览器（如 Chrome、Safari） */
		    &::-webkit-scrollbar {
		      display: none;
		    }
		    /* 隐藏滚动条，适用于 Firefox */
		    scrollbar-width: none;
	}
	
	.top2-item {
		min-width: 80px; /* 设置每个 item 的最小宽度 */
		display: flex;
	    flex-direction: column; /* 让内容垂直排列 */
	    align-items: center; /* 水平居中 */
	}
	
	.icon {
	  width: 40px;
	  height: 40px;
	  background-color: #ccc;
	}
	
	.tag {
	  margin-top: 5px;
	  font-size: 22rpx;
	}

	.content{
		margin-top: 5px;
		font-size: 24rpx;
		font-weight: bold;
	}
	
	.info{
		margin-top: 20px;
		background-color: #e9e9e9;
		padding: 20rpx;
	}
	
	.registration-item {
	  display: flex;
	  margin-bottom: 10px;
	}
	
	.registration-label {
	  width: 120px;
	  font-weight: bold;
	}
	
	.registration-value {
	  flex: 1;
	}
	/* 底部选项卡样式 */
	.tab-bar {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  display: flex;
	  background-color: white;
	  border-top: 1px solid #ccc;
	}
	
	.tab-item {
	  flex: 1;
	  text-align: center;
	  padding: 10px;
	}
	
	.tab-item text {
	  color: #333;
	}
	
	.tab-item.active text {
	  color: #007aff;
	}

	
	.fast-text {
	  font-size: 22rpx;
	}
	
	.fast-item {
	  position: relative;
	  padding: 4rpx 0;
	  line-height: 1;
	  text-align: center;
	  width: 84rpx;
	
	  &--cart {
	    margin-left: 6rpx;
	    .fast-icon { margin-left: -12rpx; }
	  }
	  
	  // 角标
	  .fast-badge {
	    display: inline-block;
	    box-sizing: border-box;
	    min-width: 16px;
	    padding: 0 3px;
	    color: #fff;
	    font-weight: 500;
	    font-size: 12px;
	    font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
	    line-height: 1.2;
	    text-align: center;
	    background-color: #ee0a24;
	    border: 1px solid #fff;
	    border-radius: 999px;
	  }
	
	  .fast-badge--fixed {
	    position: absolute;
	    top: 0;
	    right: 0;
	    transform-origin: 100%
	  }
	
	  .fast-icon {
	    font-size: 44rpx;
	    margin-bottom: 8rpx;
	  }
	
	  .fast-text {
	    font-size: 22rpx;
	  }
	}
	
	// 操作按钮
	.foo-item-btn {
	  flex: 1;
	
	  .btn-wrapper {
	    height: 100%;
	    display: flex;
	    align-items: center;
	  }
	
	  .btn-item {
	    flex: 1;
	    font-size: 28rpx;
	    height: 72rpx;
	    margin-right: 16rpx;
	    color: #fff;
	    border-radius: 50rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	  }
	
	  // 立即报名按钮
	  .btn-item-main {
	    background: linear-gradient(to right, $main-bg, $main-bg2);
	    color: $main-text;
	  }
	}
	.pic{
		width: 100%;
		height: 100vw;
	}
</style>